<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})
const option = {
    color: ['#FFA444','#2E93FF','#00EEFD','#07F8B9'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '13%',
        right: '5%',
        left: '0%',
        bottom: '0%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: props.xData,
            axisLine: {
                lineStyle: {
                    color: '#02387B',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255,255,255,1)',
                textStyle: {
                    fontSize: 12,
                }
            },
        },
    ],
    yAxis: [
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255,255,255,0.52)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        }
    ],
    series: [
        {
            type: 'bar',
            colorBy: 'data',
            data: props.sData,
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: true,
                },
            },
            barWidth: 15,
            // itemStyle: {
            //     normal: {
            //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                 offset: 0,
            //                 color: "#15F7FF"
            //             },
            //             {
            //                 offset: 1,
            //                 color: "#15FFC5"
            //             }
            //         ])
            //     }
            // },
        }
    ],
}
const chart = ref()
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
